<template>
  <el-dialog title="数据导入" :visible="dialogUpload" width="483px" class="uploadDialog" @close="handleClose">
    <el-form ref="dialogForm" label-position="right" label-width="100px" :inline="true">
      <!-- 商品图片 -->
      <el-form-item prop="skuImage" label="标题：">
        <el-upload
          style="width:100%"
          action=""
          :limit="1"
          :http-request="uploadSectionFile"
        >
          <el-button size="small" type="primary"><i class="el-icon-upload avatar-uploader-icon" />点击上传</el-button>
          <div slot="tip">支持扩展名：xls、xlsx，文件不得大于1M</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button class="cancel" @click="handleClose">取 消</el-button>
      <el-button v-loading="loading" type="primary" class="confirm" @click="submit">确 认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postSkuUploadAPI } from '@/api/goods'
export default {
  name: '',
  components: {},
  props: {
    dialogUpload: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      file: ''
    }
  },
  computed: {
  },
  watch: {},
  created() {
  },
  methods: {
    // 退出弹框
    handleClose() {
      this.$emit('update:dialogUpload', false)
      this.$refs.dialogForm.resetFields()
      this.fileList = []
    },
    // 上传数据
    async submit() {
      try {
        this.loading = true
        const fromData = new FormData()
        fromData.append('fileName', this.file)
        await postSkuUploadAPI(fromData)
        this.$message.success('数据导入成功')
        this.handleClose()
        this.$parent.getSkuSearch()
      } catch (error) {
        console.log(error.response)
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    uploadSectionFile({ file }) {
      const isXLS = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isXLS) {
        this.$message.error('上传文件只能是 XLS、XLSX 格式!')
        return isXLS
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!')
        return isLt1M
      }
      this.file = file
    }
  }
}
</script>
<style lang="scss">
.uploadDialog{
  .el-dialog{
  border-radius: 10px;
  }
  .el-dialog__body{
    padding: 10px 40px;
  }
  .el-upload{
    width: 250px;
    text-align: unset;
    .el-button{
      width: 200px;
      font-size: 16px;
      .el-icon-upload{
        font-size: 20px;
        margin-right: 5px;
      }
    }
  }
}
</style>
<style scoped lang='scss'>
.dialog-footer{
  text-align: center;
}
.cancel{
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
}
.confirm{
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
    margin-left: 34px;
}
</style>
